<template>
  <div class="main">
    <header>
      <van-nav-bar title="商品评价"  left-arrow @click-left='clickLeft'>
        <template #right>
          <span class="yo-ico">&#xe62d;</span>
        </template>
      </van-nav-bar>
    </header>
    <div class="content">
      <div class="praise-rate">
        <p>商品好评率98%</p>
        <ul>
          <li>全部</li>
          <li>全部</li>
          <li>全部</li>
          <li>全部</li>
        </ul>
      </div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <userEva></userEva>
        <userEva></userEva>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from 'vant';
import userEva from '@/components/evaluate/UserEvaluate'
import { PullRefresh } from 'vant';

Vue.use(PullRefresh);
Vue.use(NavBar);
export default {
  components: {
    userEva
  },
  data() {
    return {
      isLoading: false,
    }
  },
  methods: {
    clickLeft() {
      this.$router.back();
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
  }
}
</script>


<style lang="stylus" scoped>
.main
  height 100%
  display flex 
  flex-direction column
  flex 1
.praise-rate
  padding 0 .16rem
  height .84rem
  border-bottom .1rem solid #f2f2f2
  p
    font-size .12rem
    color #999
    line-height .36rem
  ul 
    display flex 
    justify-content space-around
    li
      width .73rem
      text-align center 
      line-height .28rem
      background-color #f8f8fe
      border-radius .28rem
.content
  padding .1rem .12rem
  height 100%
  overflow scroll
</style>